<template>
  <div class="agent-apply-container">
    <!-- 背景装饰元素 -->
    <BackgroundDecoration />

    <div class="agent-apply-wrapper">
      <!-- 顶部导航栏 -->
      <UserTopNavbar :active-index="'3'" />

      <div class="main-content">
        <!-- 侧边栏 -->
        <UserSidebar :active-menu="'agent-apply'" />

        <!-- 主内容区域 -->
        <div class="content-area">
          <div class="form-container">
            <h1 class="page-title">中介申请</h1>

            <!-- 加载状态 -->
            <div v-if="loading" class="loading-container">
              <el-loading-directive v-loading="true" element-loading-text="正在检查申请状态...">
                <div style="height: 100px;"></div>
              </el-loading-directive>
            </div>

            <!-- 申请状态提示 -->
            <div v-else-if="!canApply" class="status-alert">
              <el-alert
                v-if="applicationStatus?.certifyStatus === 2"
                title="您的中介申请已通过审核"
                type="success"
                :closable="false"
                show-icon
              >
                <template #default>
                  您的中介申请已通过审核，无需重复申请。
                  <el-button type="text" @click="$router.push('/agent/status')">查看申请状态</el-button>
                </template>
              </el-alert>

              <el-alert
                v-else-if="applicationStatus?.certifyStatus === 1"
                title="您的申请正在审核中"
                type="warning"
                :closable="false"
                show-icon
              >
                <template #default>
                  您的申请正在审核中，请耐心等待审核结果。
                  <el-button type="text" @click="$router.push('/agent/status')">查看申请状态</el-button>
                </template>
              </el-alert>
            </div>

            <el-steps :active="currentStep" finish-status="success" simple class="steps" v-if="canApply">
              <el-step title="填写基本信息" />
              <el-step title="上传资质证明" />
              <el-step title="提交审核" />
            </el-steps>

            <div class="form-content" v-if="canApply">
              <el-form
                :model="agentForm"
                :rules="rules"
                ref="agentFormRef"
                label-width="120px"
                v-if="currentStep === 0"
              >
                <el-form-item label="真实姓名" prop="realName">
                  <el-input v-model="agentForm.realName" placeholder="请输入真实姓名" />
                </el-form-item>
                <el-form-item label="身份证号" prop="idCard">
                  <el-input v-model="agentForm.idCard" placeholder="请输入身份证号码" />
                </el-form-item>
                <el-form-item label="联系电话" prop="phone">
                  <el-input v-model="agentForm.phone" placeholder="请输入联系电话" />
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                  <el-input v-model="agentForm.email" placeholder="请输入邮箱地址" />
                </el-form-item>
                <el-form-item label="所在城市" prop="city">
                  <el-select v-model="agentForm.city" placeholder="请选择所在城市" style="width: 100%">
                    <el-option label="北京" value="beijing" />
                    <el-option label="上海" value="shanghai" />
                    <el-option label="广州" value="guangzhou" />
                    <el-option label="深圳" value="shenzhen" />
                  </el-select>
                </el-form-item>
                <el-form-item label="工作年限" prop="workYears">
                  <el-slider v-model="agentForm.workYears" :min="0" :max="30" show-input />
                </el-form-item>
                <el-form-item label="公司名称" prop="companyName">
                  <el-input v-model="agentForm.companyName" placeholder="请输入公司全称" />
                </el-form-item>
                <el-form-item label="公司地址" prop="address">
                  <el-input
                    v-model="agentForm.address"
                    placeholder="请输入公司详细地址"
                  />
                </el-form-item>
              </el-form>

              <div v-if="currentStep === 1">
                <el-form
                  :model="businessForm"
                  :rules="businessRules"
                  ref="businessFormRef"
                  label-width="120px"
                  class="business-form"
                >
                  <el-form-item label="营业执照编号" prop="licenseNumber">
                    <el-input
                      v-model="businessForm.licenseNumber"
                      placeholder="请输入营业执照统一社会信用代码"
                      maxlength="18"
                      show-word-limit
                      @input="formatLicenseNumber"
                      @blur="validateLicenseNumber"
                    />
                    <div class="form-tip">
                      请输入18位统一社会信用代码，格式：2位机构类别代码 + 6位登记管理部门行政区划码 + 10位主体标识码
                    </div>
                    <div v-if="licenseValidationMessage" class="validation-message" :class="licenseValidationClass">
                      {{ licenseValidationMessage }}
                    </div>
                  </el-form-item>
                </el-form>

                <div class="upload-section">
                  <h3>营业执照照片</h3>
                  <div class="upload-tip">请选择清晰的营业执照照片，确保信息完整可见（提交申请时才会上传到服务器）</div>
                  <div class="file-upload-container">
                    <el-upload
                      ref="uploadRef"
                      class="upload-demo"
                      :auto-upload="false"
                      :show-file-list="false"
                      :on-change="handleFileChange"
                      :before-upload="beforeUpload"
                      accept="image/*"
                    >
                      <div v-if="!businessLicenseFile && !businessLicensePreview" class="upload-placeholder">
                        <el-icon class="upload-icon"><Plus /></el-icon>
                        <div class="upload-text">点击选择营业执照照片</div>
                        <div class="upload-hint">支持 JPG、PNG 格式，大小不超过 5MB</div>
                      </div>
                      <div v-else class="image-preview">
                        <img :src="businessLicensePreview" class="uploaded-image" />
                        <div class="image-overlay">
                          <el-icon class="preview-icon" @click.stop="previewImage"><ZoomIn /></el-icon>
                          <el-icon class="delete-icon" @click.stop="deleteImage"><Delete /></el-icon>
                        </div>
                      </div>
                    </el-upload>
                  </div>
                  <div class="upload-requirements">
                    <p>上传要求：</p>
                    <ul>
                      <li>图片格式：JPG、PNG、JPEG</li>
                      <li>图片大小：不超过5MB</li>
                      <li>图片清晰度：确保文字清晰可读</li>
                      <li>完整性：包含完整的营业执照信息</li>
                      <li>注意：图片将在提交申请时上传到服务器</li>
                    </ul>
                  </div>
                </div>
              </div>

              <div v-if="currentStep === 2" class="review-section">
                <el-descriptions title="申请信息确认" :column="1" border>
                  <el-descriptions-item label="真实姓名">{{ agentForm.realName }}</el-descriptions-item>
                  <el-descriptions-item label="身份证号">{{ agentForm.idCard }}</el-descriptions-item>
                  <el-descriptions-item label="联系电话">{{ agentForm.phone }}</el-descriptions-item>
                  <el-descriptions-item label="邮箱">{{ agentForm.email }}</el-descriptions-item>
                  <el-descriptions-item label="所在城市">{{ getCityName(agentForm.city) }}</el-descriptions-item>
                  <el-descriptions-item label="工作年限">{{ agentForm.workYears }}年</el-descriptions-item>
                  <el-descriptions-item label="公司名称">{{ agentForm.companyName }}</el-descriptions-item>
                  <el-descriptions-item label="公司地址">{{ agentForm.address }}</el-descriptions-item>
                  <el-descriptions-item label="营业执照编号">{{ businessForm.licenseNumber }}</el-descriptions-item>
                </el-descriptions>

                <div class="uploaded-images">
                  <div class="image-preview-section">
                    <h4>营业执照照片</h4>
                    <el-image
                      v-if="businessLicensePreview"
                      :src="businessLicensePreview"
                      class="preview-image"
                      fit="cover"
                      :preview-src-list="[businessLicensePreview]"
                    />
                    <div v-else class="no-image">暂无图片</div>
                  </div>
                </div>

                <div class="submit-notice">
                  <el-alert
                    title="提交须知"
                    type="info"
                    :closable="false"
                    show-icon
                  >
                    <template #default>
                      <p>1. 请确保所填写的信息真实有效</p>
                      <p>2. 营业执照必须在有效期内</p>
                      <p>3. 我们将在7个工作日内完成审核</p>
                      <p>4. 审核结果将通过邮箱和短信通知您</p>
                    </template>
                  </el-alert>
                </div>
              </div>
            </div>

            <div class="form-actions">
              <el-button v-if="currentStep > 0" @click="prevStep">上一步</el-button>
              <el-button
                v-if="currentStep < 2"
                type="primary"
                @click="nextStep"
                :loading="loading"
              >
                {{ currentStep === 1 ? '下一步' : '继续' }}
              </el-button>
              <el-button
                v-if="currentStep === 2"
                type="success"
                @click="submitApplication"
                :loading="submitting"
              >
                提交申请
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 图片预览对话框 -->
    <el-dialog v-model="previewVisible" title="营业执照预览" width="60%">
      <img :src="businessLicensePreview" style="width: 100%" />
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, ZoomIn, Delete } from '@element-plus/icons-vue'
import BackgroundDecoration from '@/components/user/BackgroundDecoration.vue'
import UserTopNavbar from '@/components/user/UserTopNavbar.vue'
import UserSidebar from '@/components/user/UserSidebar.vue'
import router from '@/router'
import api from '@/utils/api'
import { getToken, canApplyAgent, getUserInfo } from '@/utils/auth'

const currentStep = ref(0)
const loading = ref(false)
const submitting = ref(false)
const canApply = ref(true) // 是否可以申请
const applicationStatus = ref(null) // 当前申请状态

// 表单数据
const agentForm = reactive({
  realName: '苏雨',
  idCard: '360781200407070809',
  phone: '18942365354',
  email: '2774849593@qq.com',
  city: '北京',
  workYears: 3,
  companyName: '链家房地产经纪有限公司',
  address: '北京市朝阳区建国路88号SOHO现代城'
})

// 营业执照表单数据
const businessForm = reactive({
  licenseNumber: '91310105MA1F234567'
})

// 营业执照验证相关
const licenseValidationMessage = ref('')
const licenseValidationClass = ref('')

// 图片上传数据
const businessLicense = ref('')
const businessLicenseFile = ref(null) // 存储文件对象
const businessLicensePreview = ref('') // 存储预览URL
const previewVisible = ref(false) // 预览对话框显示状态
const uploadRef = ref(null) // 上传组件引用

// 表单引用
const agentFormRef = ref(null)
const businessFormRef = ref(null)

// 表单验证规则
const rules = {
  realName: [
    { required: true, message: '请输入真实姓名', trigger: 'blur' }
  ],
  idCard: [
    { required: true, message: '请输入身份证号码', trigger: 'blur' },
    { pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '身份证号码格式不正确', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入联系电话', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    { type: 'email', message: '邮箱地址格式不正确', trigger: 'blur' }
  ],
  city: [
    { required: true, message: '请选择所在城市', trigger: 'change' }
  ],
  companyName: [
    { required: true, message: '请输入公司名称', trigger: 'blur' },
    { min: 2, max: 50, message: '公司名称长度在 2 到 50 个字符', trigger: 'blur' }
  ],
  address: [
    { required: true, message: '请输入公司地址', trigger: 'blur' },
    { min: 2, max: 100, message: '公司地址长度在 2 到 100 个字符', trigger: 'blur' }
  ]
}

// 营业执照表单验证规则
const businessRules = {
  licenseNumber: [
    { required: true, message: '请输入营业执照编号', trigger: 'blur' },
    {
      pattern: /^[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}$/,
      message: '请输入正确的18位统一社会信用代码',
      trigger: 'blur'
    },
    {
      min: 18,
      max: 18,
      message: '营业执照编号必须为18位',
      trigger: 'blur'
    }
  ]
}

// 格式化营业执照编号（转大写，移除非法字符）
const formatLicenseNumber = () => {
  let value = businessForm.licenseNumber.toUpperCase()
  // 只保留数字和有效字母
  value = value.replace(/[^0-9A-HJ-NPQRTUWXY]/g, '')
  // 限制长度为18位
  if (value.length > 18) {
    value = value.substring(0, 18)
  }
  businessForm.licenseNumber = value
}

// 验证营业执照编号
const validateLicenseNumber = () => {
  const licenseNo = businessForm.licenseNumber
  licenseValidationMessage.value = ''
  licenseValidationClass.value = ''

  if (!licenseNo) {
    return
  }

  if (licenseNo.length !== 18) {
    licenseValidationMessage.value = '营业执照编号必须为18位'
    licenseValidationClass.value = 'error'
    return
  }

  if (!/^[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}$/.test(licenseNo)) {
    licenseValidationMessage.value = '营业执照编号格式错误，请输入正确的统一社会信用代码'
    licenseValidationClass.value = 'error'
    return
  }

  licenseValidationMessage.value = '格式正确'
  licenseValidationClass.value = 'success'
}

// 获取城市名称
const getCityName = (cityCode) => {
  const cityMap = {
    beijing: '北京',
    shanghai: '上海',
    guangzhou: '广州',
    shenzhen: '深圳'
  }
  return cityMap[cityCode] || cityCode
}

// 下一步
const nextStep = () => {
  if (currentStep.value === 0) {
    // 验证第一步表单
    agentFormRef.value.validate((valid) => {
      if (valid) {
        currentStep.value++
      } else {
        ElMessage.error('请填写完整的基本信息')
      }
    })
  } else if (currentStep.value === 1) {
    // 验证营业执照信息
    businessFormRef.value.validate((valid) => {
      if (valid) {
        if (!businessLicenseFile.value) {
          ElMessage.error('请选择营业执照照片')
          return
        }
        currentStep.value++
      } else {
        ElMessage.error('请填写完整的营业执照信息')
      }
    })
  }
}

// 上一步
const prevStep = () => {
  if (currentStep.value > 0) {
    currentStep.value--
  }
}

// 文件选择处理
const handleFileChange = (file) => {
  console.log('文件选择:', file)
  businessLicenseFile.value = file.raw

  // 创建预览URL
  const reader = new FileReader()
  reader.onload = (e) => {
    businessLicensePreview.value = e.target.result
  }
  reader.readAsDataURL(file.raw)
}

// 上传前验证
const beforeUpload = (file) => {
  // 检查文件类型
  const isImage = file.type.startsWith('image/')
  if (!isImage) {
    ElMessage.error('只能上传图片文件!')
    return false
  }

  // 检查文件大小
  const isLimitSize = file.size / 1024 / 1024 < 5
  if (!isLimitSize) {
    ElMessage.error('图片大小不能超过 5MB!')
    return false
  }

  return true
}

// 预览图片
const previewImage = () => {
  previewVisible.value = true
}

// 删除图片
const deleteImage = () => {
  businessLicenseFile.value = null
  businessLicensePreview.value = ''
  businessLicense.value = ''
  if (uploadRef.value) {
    uploadRef.value.clearFiles()
  }
}

// 检查申请状态
const checkApplicationStatus = async () => {
  try {
    console.log('=== 开始检查申请状态 ===')
    const token = getToken()
    console.log('使用的Token:', token)

    const response = await api.get('/agent/auth/result', {
      headers: {
        'info': token
      }
    })

    console.log('申请状态检查完整响应:', response)
    console.log('响应状态码:', response.status)
    console.log('响应数据:', response.data)

    if (response.data && response.data.code === 200 && response.data.data) {
      const data = response.data.data
      applicationStatus.value = data

      // 使用verifyStatus字段
      const verifyStatus = parseInt(data.verifyStatus)
      console.log('当前申请状态:', verifyStatus, '类型:', typeof verifyStatus)

      // 根据 verifyStatus 判断是否可以申请
      // 0: 审核未通过(可以重新申请), 1: 审核中(不可申请), 2: 审核通过(不可申请)
      if (verifyStatus === 2) {
        canApply.value = false
        // 显示友好的成功提示
        ElMessageBox.alert(
          '您的中介申请已通过审核，现在可以使用中介功能了！',
          '申请已通过',
          {
            confirmButtonText: '查看状态',
            type: 'success',
            callback: () => {
              router.push('/agent/status')
            }
          }
        )
        return false
      } else if (verifyStatus === 1) {
        console.log('检测到申请状态为审核中，准备显示提示框')
        canApply.value = false
        // 显示友好的等待提示
        ElMessageBox.alert(
          '您的中介申请正在审核中，管理员将在1-3个工作日内完成审核。您可以在申请状态页面查看详细进度。',
          '申请审核中',
          {
            confirmButtonText: '查看状态',
            type: 'warning',
            callback: () => {
              console.log('用户点击查看状态，跳转到状态页面')
              router.push('/agent/status')
            }
          }
        )
        console.log('提示框已显示')
        return false
      } else if (verifyStatus === 0) {
        // 审核未通过，可以重新申请
        canApply.value = true
        ElMessageBox.alert(
          '您之前的申请未通过审核，可以修改申请信息后重新提交。请仔细检查申请资料的完整性和准确性。',
          '可以重新申请',
          {
            confirmButtonText: '重新申请',
            type: 'info'
          }
        )
        return true
      }
    }

    // 没有申请记录，可以申请
    canApply.value = true
    return true
  } catch (error) {
    console.log('=== 申请状态检查出错 ===')
    console.error('完整错误信息:', error)
    console.log('错误响应状态:', error.response?.status)
    console.log('错误响应数据:', error.response?.data)
    console.log('错误消息:', error.message)

    // 检查错误类型
    if (error.response?.status === 404 || error.response?.data?.code === 1001) {
      // 404 或 1001 表示没有申请记录，可以申请
      console.log('没有申请记录，允许申请')
      canApply.value = true
      return true
    } else {
      // 其他错误，为了安全起见，不允许申请
      console.error('检查申请状态时发生未知错误')
      canApply.value = false
      ElMessage.error('检查申请状态失败，请稍后重试')
      return false
    }
  }
}

// 上传营业执照图片
const uploadBusinessLicense = async () => {
  if (!businessLicenseFile.value) {
    throw new Error('请选择营业执照照片')
  }

  console.log('准备上传文件:', {
    name: businessLicenseFile.value.name,
    size: businessLicenseFile.value.size,
    type: businessLicenseFile.value.type
  })

  const formData = new FormData()
  formData.append('file', businessLicenseFile.value)

  try {
    console.log('发送上传请求到:', '/oss/upload/images')
    console.log('请求头:', {
      'info': getToken()
      // Content-Type将由浏览器自动设置为multipart/form-data
    })

    const response = await api.post('/oss/upload/images', formData, {
      headers: {
        'info': getToken()
        // 不设置Content-Type，让浏览器自动设置multipart/form-data边界
      }
    })

    console.log('OSS上传响应:', response)
    console.log('响应类型:', typeof response)
    console.log('响应code:', response.data?.code)
    console.log('响应data:', response.data?.data)

    // 处理响应数据
    if (response.data && (response.data.code === 200 || response.data.code === '200')) {
      console.log('上传成功，返回URL:', response.data.data)
      return response.data.data // 返回图片URL
    } else {
      console.error('上传失败，响应:', response)
      throw new Error(response.data?.message || '图片上传失败')
    }
  } catch (error) {
    console.error('上传营业执照失败 - 完整错误信息:', error)
    console.error('错误响应:', error.response)
    console.error('错误响应数据:', error.response?.data)
    console.error('错误状态码:', error.response?.status)

    if (error.response?.data?.message) {
      throw new Error(error.response.data.message)
    } else if (error.response?.status === 413) {
      throw new Error('文件太大，请选择小于5MB的图片')
    } else if (error.response?.status === 415) {
      throw new Error('不支持的文件格式，请选择JPG或PNG图片')
    } else {
      throw new Error('营业执照图片上传失败，请重试')
    }
  }
}

// 提交申请
const submitApplication = async () => {
  submitting.value = true

  try {
    // 先上传营业执照图片
    ElMessage.info('正在上传营业执照图片...')
    const licensePicPath = await uploadBusinessLicense()

    ElMessage.success('图片上传成功，正在提交申请...')

    // 构建提交数据
    const submitData = {
      licenseNo: businessForm.licenseNumber,
      licensePicPath: licensePicPath,
      phone: agentForm.phone,
      companyName: agentForm.companyName,
      companyPosition: agentForm.address, // 这里存储的是公司地址信息
      realName: agentForm.realName,
      idCard: agentForm.idCard,
      email: agentForm.email,
      city: agentForm.city,
      workYears: parseInt(agentForm.workYears) || 0
    }

    console.log('提交的申请数据:', submitData)

    // 调用后端API
    const response = await api.post('/agent/auth/apply', submitData, {
      headers: {
        'info': getToken()
      }
    })

    console.log('后端响应:', response)

    if (response.data && (response.data.code === 200 || response.data.code === '200')) {
      ElMessage.success('申请已提交成功，我们将在7个工作日内完成审核')

      // 跳转到申请状态页面
      router.push('/agent/status')
    } else {
      throw new Error(response.data?.message || '提交失败')
    }
  } catch (error) {
    console.error('提交申请失败:', error)

    // 处理特定的错误类型
    let errorMessage = '提交申请失败，请稍后重试'

    if (error.message) {
      errorMessage = error.message
    } else if (error.response?.data?.message) {
      const serverMessage = error.response.data.message
      if (serverMessage.includes('营业执照编号')) {
        errorMessage = serverMessage
      } else if (serverMessage.includes('Data truncated')) {
        errorMessage = '数据格式错误，请检查营业执照编号是否为18位'
      } else if (serverMessage.includes('已被使用')) {
        errorMessage = '该营业执照编号已被使用，请检查后重新输入'
      } else if (serverMessage.includes('已经申请')) {
        errorMessage = '您已经提交过申请，请勿重复申请'
      } else {
        errorMessage = serverMessage
      }
    }

    ElMessage.error(errorMessage)
  } finally {
    submitting.value = false
  }
}



// 页面加载时检查申请状态
onMounted(async () => {
  loading.value = true
  try {
    // 调试信息：检查用户信息
    const userInfo = getUserInfo()
    const token = getToken()
    console.log('=== 申请页面调试信息 ===')
    console.log('用户信息:', userInfo)
    console.log('Token:', token)
    console.log('canApplyAgent():', canApplyAgent())

    // 首先检查用户角色
    if (!canApplyAgent()) {
      console.log('用户角色检查失败，不能申请中介')
      if (userInfo?.role === 2) {
        ElMessage.error('房东用户不能申请中介')
      } else if (userInfo?.role === 4) {
        ElMessage.error('您已经是中介用户，无需重复申请')
      } else {
        ElMessage.error('用户角色不符合申请条件')
      }
      canApply.value = false
      return
    }

    console.log('用户角色检查通过，开始检查申请状态...')
    await checkApplicationStatus()
  } finally {
    loading.value = false
  }
})
</script>

<style scoped>
.agent-apply-container {
  display: flex;
  min-height: 100vh;
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
}

.agent-apply-wrapper {
  width: 100%;
  height: 100vh;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

.main-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.content-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  overflow-y: auto;
  padding: 20px;
}

.form-container {
  flex: 1;
  background: white;
  border-radius: 15px;
  padding: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(10px);
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
}

.page-title {
  text-align: center;
  color: #2c3e50;
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 30px;
}

.status-alert {
  margin: 20px 0;
}

.status-alert .el-alert {
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.steps {
  margin-bottom: 30px;
}

.form-content {
  min-height: 400px;
}

.upload-section {
  margin-bottom: 30px;
}

.upload-section h3 {
  margin: 0 0 15px;
  color: #2c3e50;
  font-size: 16px;
  font-weight: 600;
}

.upload-item {
  max-width: 400px;
}

.file-upload-container {
  margin-bottom: 20px;
}

.upload-demo {
  border: 2px dashed #d9d9d9;
  border-radius: 8px;
  width: 200px;
  height: 200px;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s;
}

.upload-demo:hover {
  border-color: #409eff;
}

.upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #8c939d;
}

.upload-icon {
  font-size: 28px;
  margin-bottom: 16px;
}

.upload-text {
  font-size: 14px;
  margin-bottom: 8px;
}

.upload-hint {
  font-size: 12px;
  color: #999;
}

.image-preview {
  position: relative;
  width: 100%;
  height: 100%;
}

.uploaded-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  opacity: 0;
  transition: opacity 0.3s;
}

.image-preview:hover .image-overlay {
  opacity: 1;
}

.preview-icon,
.delete-icon {
  color: white;
  font-size: 20px;
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.preview-icon:hover {
  background-color: rgba(64, 158, 255, 0.8);
}

.delete-icon:hover {
  background-color: rgba(245, 108, 108, 0.8);
}

.upload-tip {
  color: #7f8c8d;
  font-size: 14px;
  margin-bottom: 15px;
  padding: 10px;
  background: #f8f9fa;
  border-radius: 6px;
  border-left: 4px solid #4A90E2;
}

.upload-requirements {
  margin-top: 15px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.upload-requirements p {
  margin: 0 0 10px 0;
  font-weight: 600;
  color: #2c3e50;
}

.upload-requirements ul {
  margin: 0;
  padding-left: 20px;
}

.upload-requirements li {
  color: #7f8c8d;
  margin-bottom: 5px;
  font-size: 14px;
}

.business-form {
  margin-bottom: 30px;
}

.form-tip {
  color: #7f8c8d;
  font-size: 12px;
  margin-top: 5px;
  line-height: 1.4;
}

.validation-message {
  font-size: 12px;
  margin-top: 5px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.validation-message.success {
  color: #67c23a;
  background-color: #f0f9ff;
  border: 1px solid #b3e19d;
}

.validation-message.error {
  color: #f56c6c;
  background-color: #fef0f0;
  border: 1px solid #fbc4c4;
}

.submit-notice {
  margin-top: 30px;
}

.review-section {
  padding: 20px 0;
}

.uploaded-images {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 30px;
}

.image-preview {
  flex: 1;
  min-width: 200px;
}

.image-preview h4 {
  margin: 0 0 10px;
  color: #2c3e50;
  font-size: 14px;
  font-weight: 600;
}

.preview-image {
  width: 100%;
  height: 150px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.no-image {
  width: 100%;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f7fa;
  border-radius: 8px;
  color: #909399;
  font-size: 14px;
}

.form-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}

@media (max-width: 768px) {
  .form-container {
    padding: 20px;
    margin: 10px;
  }

  .uploaded-images {
    flex-direction: column;
  }

  .image-preview {
    min-width: 100%;
  }
}
</style>
